/*
 * Created on 02.07.2006
 */
package com.xlabs.client.richtext;


import com.google.gwt.event.dom.client.MouseDownEvent;
import com.google.gwt.event.dom.client.MouseDownHandler;
import com.google.gwt.event.dom.client.MouseMoveEvent;
import com.google.gwt.event.dom.client.MouseMoveHandler;
import com.google.gwt.event.dom.client.MouseOutEvent;
import com.google.gwt.event.dom.client.MouseOutHandler;
import com.google.gwt.event.dom.client.MouseOverEvent;
import com.google.gwt.event.dom.client.MouseOverHandler;
import com.google.gwt.event.dom.client.MouseUpEvent;
import com.google.gwt.event.dom.client.MouseUpHandler;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.*;

/**
 * This class represent an image button for using in toolbars. Via css you can setup the 
 * typical visual effects.
 * 
 * The ImageButton is using the follow stylenames:
 * <ul>
 * <li>ImageButton
 * <li>ImageButton-over
 * <li>ImageButton-pressed
 * <li>Tooltip
 * </ul>
 * 
 * @author Volker Berlin
 */
public class ImageButton extends Image implements 
	MouseOverHandler, MouseMoveHandler, MouseOutHandler, MouseDownHandler, MouseUpHandler
{

    /**
     * User assigned style.
     */
	private String userStyle;

	/**
     * This method is called when the editor becomes attached to the browser's
     * document. In this method all elements are created with the current skin.
     */
	@Override
	protected void onLoad() 
	{
		super.onLoad();
		String baseUrl = "richtext/skins/default/";
        setStylesheet(baseUrl);
	}
	
    /**
     * Add the style sheet from the skin to the page. 
     * @param baseUrl The baseURL of the skin.
     */
    native void setStylesheet(String baseUrl)/*-{
        var css = $doc.createElement('link');
        css.rel = 'stylesheet';
        css.type = 'text/css';
        css.href = baseUrl + 'skin.css';
        $doc.documentElement.firstChild.appendChild(css);
    }-*/;

	/**
     * The constructor of an ImageButton
     * @param url The url of the Image.
     * @param tooltip The text of a tooltip. Will be ignored if null or empty.
     */
    public ImageButton (String url, String tooltip)
    {
        super(url);
        
        if(tooltip != null && tooltip.length() > 0)
        {
        	Tooltip oTooltip = new Tooltip(tooltip);
            super.addMouseOverHandler(oTooltip);
            super.addMouseOutHandler(oTooltip);
            super.addMouseMoveHandler(oTooltip);
            super.addMouseDownHandler(oTooltip);
        }
        
        setStyleName("ImageButton");
        
        addMouseOverHandler(this);
        addMouseMoveHandler(this);
        addMouseOutHandler(this);
        addMouseDownHandler(this);
        addMouseUpHandler(this);
    }
    
    
    /**
     * Overridden to block the browser's default behaviour.
     */
    public void onBrowserEvent(Event event) {
        super.onBrowserEvent(event);
        //This is required to prevent a Drag & Drop of the Image in the edit text.
        DOM.eventPreventDefault(event);
    }

	public void onMouseOver(MouseOverEvent event)
	{
		setStyleName("ImageButton-over " + userStyle);
	}

	public void onMouseMove(MouseMoveEvent event)
	{
		setStyleName("ImageButton-over " + userStyle);
	}

	public void onMouseOut(MouseOutEvent event)
	{
		setStyleName("ImageButton " + userStyle);
	}

	public void onMouseDown(MouseDownEvent event)
	{
		setStyleName("ImageButton-pressed " + userStyle);
	}

	public void onMouseUp(MouseUpEvent event)
	{
		setStyleName("ImageButton-over " + userStyle);
	}
	
	/**
	 * Sets a style on this button.
	 */
	public void setUserStyleName(String style)
	{
		userStyle = style;
		
		setStyleName(getStyleName() + " " + style);
	}
}
